<!--
  工单详情组件，通过数据的方式配置
  数据详情参考'src/pages/provisionServices/delayWorkOrder/configs/formData.js'
 -->
<template>
  <div style="position: relative;">
    <Modal
      :title="title"
      v-model="detailVisible"
      :width="modalWidth" scrollable class-name="darkDialog user-detailDialog" style="min-width: 1000px;max-width: 1200px;">
      <Form  :label-width="140">
        <Row>
          <template v-for="(item, index) in listData">
            <div  v-show="item.show" :key="index+'titlecol'">
              <Col>
                <div :key="index+'title'" class="echarts-title">{{item.title}}</div>
              </Col>
              <template  v-for="(ele, ei) in item.body">
                <Col :span="ele.span" :key="index+'-'+ei" v-show="ele.show">
                  <FormItem
                      :key="index+'-'+ei+'666'"
                      :label="ele.label"
                      :labelWidth="ele.labelWidth">
                    <template v-if="ele.type === 'input'">
                      <Input v-model="detailInfo[ele.prop]" :disabled="ele.disabled" />
                    </template>
                    <template v-if="ele.type === 'dateScope'">
                      <Input v-model='detailInfo[ele.prop[0]]' disabled style="width: 48%" /> 至 <Input v-model='detailInfo[ele.prop[1]]' disabled style="width: 49%" />
                    </template>
                    <template v-if="ele.type === 'fileList'">
                      <div v-if='(detailInfo[ele.prop] || []).length > 0'>
                      <span
                          v-for='(eleTwo, ii) in detailInfo[ele.prop]'
                          @click='checkFile(eleTwo.url,eleTwo.attachmentName)'
                          :key="ii+'file'"  class="dowloadBtn"><Icon  type="ios-paper-outline" />{{ eleTwo.attachmentName}}</span>
                      </div>
                      <div v-else>
                        暂无记录
                      </div>
                    </template>
                    <template v-if="ele.type === 'rate'">
                      <Rate show-text allow-half v-model="detailInfo[ele.prop]" :disabled="ele.disabled">
                        <span style="color: #f5a623">{{ detailInfo[ele.prop] }}分</span>
                      </Rate>
                    </template>
                  </FormItem>
                </Col>
              </template>
            </div>
          </template>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="detailVisible = false">确定</Button>
      </div>
<!--<Spin size="large" fix v-if="spinShow"></Spin>-->
    </Modal>
  </div>
  
</template>

<script>
import {
  getByWorkOrderId
} from "@/api/operation";
import {checkFile} from "@/mixins/operation";

export default {
  props: {
    title: {
      type: String,
      default: '工单详情'
    },
    modalWidth: {
      type: String,
      default: '1000px'
    },
    workOrderId:{
      type:String,
      default:''
    },
    listData: {
      type: Array,
      default: () => [],
    },
  },
  mixins: [checkFile],
  data() {
   return{
      detailInfo:{},
      spinShow: false,
      detailVisible: false,
   }
  },
  computed: {},
  created() {},
  mounted(){},
  watch: {},
  methods:{
    /**
     * 初始化
     */
    init() {
      this.detailVisible = true;
      this.spinShow = true;
      this.$nextTick(() => {
        this.getByWorkOrderId()
      })
    },
    /**
     * 获取详情数据
     */
    getByWorkOrderId(){
      this.detailInfo = {}
      getByWorkOrderId({workOrderId: this.workOrderId}).then(res=>{
        if(res.result){
          this.setDetailItemShow(res.result.workStatus);
          this.detailInfo = res.result;
          // 强制更新视图
          if (res.result.sWorkEvaluate) this.$set(this.detailInfo, "sWorkEvaluate.createTime", res.result.sWorkEvaluate.createTime)
        }else{
          this.detailInfo = {};
        }
        this.spinShow = false;
      })
    },
    /**
     * 设置是否显示-可根据路由判断逻辑
     */
    setDetailItemShow(workStatus) {
      this.listData.map(item => {
        // 已接单
        if (['04', '05'].includes(workStatus)) {
          if (['completeTime','bAttachmentInfoList'].includes(item.prop)) {
            item.show = true;
          }
        }
        if (workStatus === '05') {
          if (['工单评价信息', '服务评价信息'].includes(item.title)) item.show = true;
        }
      })
    },
   
  },
};
</script>

<style scoped lang="scss">
/deep/.ivu-form-item{
  margin-bottom: 10px;
}
/deep/.ivu-form{
  padding-right: 50px;
}
.dowloadBtn{
  color:#2d8cf0;
  cursor: default;
  padding-right:10px;
  i{
    color:#2d8cf0;
    font-size: 18px;
    font-weight: bold
  }
}
.echarts-title{
  text-align: left;
  font-size: 16px;
  color: #333;
  padding-left: 54px;
  padding-bottom: 10px;
  display: inline-block;
  position: relative;
  &:before{
    content:"";
    position: absolute;
    height: 16px;
    left: 40px;
    top:4px;
    width: 4px;
    background-color: #2d8cf0;
  };
}
</style>
